import { FC, useState } from 'react'
import { Resizable } from 'react-resizable'
import { Tree } from 'antd'
import './style.less'

const ResizableView: FC = () => {
  const treeData: any[] = [
    {
      title: 'parent 1',
      key: '0-0',
      children: [
        {
          title: 'parent 1-0',
          key: '0-0-0',
          children: [
            {
              title: 'leaf',
              key: '0-0-0-0'
            },
            {
              title: 'leaf',
              key: '0-0-0-1'
            }
          ]
        },
        {
          title: 'parent 1-1',
          key: '0-0-1',
          children: [
            { title: <span style={{ color: '#1677ff' }}>sss</span>, key: '0-0-1-0' },
            {
              title: 'leaf1',
              key: '0-0-1-1'
            }
          ]
        }
      ]
    }
  ]
  const [state, setState] = useState({ width: 240 })
  const onResize = (_event: any, { size }: any) => {
    setState({ width: size.width < 150 ? 150 : size.width })
  }

  return (
    <>
      <Resizable height={200} width={state.width} onResize={onResize}>
        <div style={{ width: state.width + 'px' }}>
          <Tree treeData={treeData} defaultExpandAll />
        </div>
      </Resizable>
    </>
  )
}

export default ResizableView
